<template>
  <page-wrap stay-still :bgColor="topBg" :extraNavHeight="16">
    <!-- #ifdef MP-WEIXIN -->
    <template #title>
      <view class="career-search" @click="toSearch">
        <text class="icon icon-search"></text>
        <text class="search-input">搜索报告/招聘会</text>
      </view>
    </template>
    <!-- #endif -->

    <view class="career">
      <view class="tabs-wrap">
        <u-tabs-swiper
          ref="tabs"
          class="tabs"
          :is-scroll="false"
          :list="tabList"
          :current="current"
          :active-color="activeColor"
          inactive-color="#555555"
          :height="90"
          :font-size="32"
          bar-width="56"
          bar-height="14"
          :bar-style="barStyleObj"
          :gutter="40"
          :duration="0.2"
          :active-item-style="activeStyle"
          @change="tabsChange"
        ></u-tabs-swiper>
      </view>
      <swiper
        class="swiper-box"
        :duration="200"
        :current="swiperCurrent"
        @transition="handleTransition"
        @animationfinish="handleAnimation"
        @change="handleSwiperChange"
      >
        <swiper-item class="swiper-item">
          <Zph />
        </swiper-item>
        <swiper-item class="swiper-item">
          <Report v-if="current == 1" :options="options" />
        </swiper-item>
        <swiper-item class="swiper-item">
          <Activity />
        </swiper-item>
        <!-- <swiper-item class="swiper-item">
          <CareerInfo ref="careerInfo" @delete="handleDelete" />
        </swiper-item> -->
      </swiper>
    </view>

    <view v-if="showDeleteModal" class="modal-drawer">
      <view class="modal-mask" @click="showDeleteModal = false">
        <view class="modal-drawer-content" :style="[modalStyle]">
          <view
            v-if="!isModalTop"
            class="icon icon-arrow-up"
            :style="'left:' + arrowLeft + 'px'"
          ></view>
          <view class="delete-box" @click.stop="() => {}">
            <view class="delete-item" @click="handleDislike">
              <text class="icon icon-delete"></text>
              <view class="item-content">
                <view class="item-content-title">不感兴趣</view>
                <view class="item-content-lable">减少这类内容</view>
              </view>
            </view>
            <view class="delete-item" @click="handleShiedldAuthor">
              <text class="icon icon-shield"></text>
              <view class="item-content">
                <view class="item-content-title"
                  >屏蔽作者:{{
                    deleteItem.ownName || deleteItem.personDetail.personIname
                  }}
                </view>
                <view class="item-content-lable">将为你屏蔽该作者内容</view>
              </view>
            </view>
          </view>
          <view
            v-if="isModalTop"
            class="icon icon-arrow-down"
            :style="'left:' + arrowLeft + 'px'"
          ></view>
        </view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import Report from "../../pagesSub/careerSubPages/report.vue";
import Zph from "../../pagesSub/careerSubPages/zph.vue";
import Activity from "../../pagesSub/careerSubPages/activity.vue";
// import CareerInfo from "../../pagesSub/careerSubPages/CareerInfo.vue";
import { updateLink } from "@/api/modules/career.js";
import ShareMixin from "@/mixins/share";
import { addBuryingPoint, getToastProId } from "@/api/modules/career";

export default {
  mixins: [ShareMixin],
  components: {
    Report,
    Zph,
    Activity,
    // CareerInfo,
  },
  data() {
    return {
      loginStatus: uni.getStorageSync("login-status") || "person",
      personId: uni.getStorageSync("person-id").slice(2) || "",
      topBg: `url(${this.$imgBaseSelf}home/top_bg.png)`,
      tabList: [
        // {
        //   name: "顾问大厅",
        // },
        {
          name: "招聘会",
        },
        {
          name: "报告",
        },
        {
          name: "活动中心",
        },
        // {
        //   name: "职讯",
        // },
      ],
      current: 0,
      swiperCurrent: 0,
      options: {},
      activeColor: this.$primaryColor,
      barStyleObj: {
        backgroundColor: "transparent",
        backgroundImage: `url(${this.$imgBaseSelf}/select.png)`,
        backgroundSize: "100% 100%",
        borderRadius: "0",
      },
      activeStyle: {
        color: "#333333",
        fontSize: "34rpx",
      },
      sharePath: "/pages/career/index",
      shareTitle: this.$selfName + " - 职讯",
      isCareerIndex: true,
      showDeleteModal: false,
      deleteItem: {},
      deleteType: "",
      modalStyle: {},
      isModalTop: false,
      screenHeight: 0,
      arrowLeft: "",
      showActPromotion: false,
      buryingPointId: "",
      cardType: "",
      alertGoods: {
        goodsPic:
          this.$imgBaseSelf +
          "career/positionDictionary/bannerAlert_699.png", //
        goodsId: "128317245100125",
      },
    };
  },
  onLoad(opt) {
    this.options = opt;
    if (opt && opt.current) {
      this.current = opt.current;
      this.swiperCurrent = opt.current;
    }
  },
  onHide() {
    this.$bus.$emit("setVippopUpVisible", false);
  },
  onShow() {
    // this.getAlertToastProId();
    // this.showAIAlert();
  },
  mounted() {
    const { screenHeight } = uni.getSystemInfoSync();
    this.screenHeight = screenHeight;
  },
  methods: {
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync("cardType") || this.cardType,
        consultantId: uni.getStorageSync("sellId")
          ? uni.getStorageSync("sellId")
          : "",
        originType: this.originFrom == "shareLink" ? 10 : 20,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
    },
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    toSearch() {
      uni.navigateTo({
        url: "/pagesSub/career/search/index?tab=" + this.current,
      });
    },
    handleTransition(e) {
      let dx = e.detail.dx;
      this.$refs.tabs.setDx(dx);
    },
    handleAnimation(e) {
      let current = e.detail.current;
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    handleSwiperChange(e) {
      let current = e.detail.current;
    },
    handleUpdate(data, index) {
      if (data.operateType == "favorite") {
        this.dataList[index].elementData.isFavorite =
          data.type == "add" ? "1" : "0";
      } else if (data.operateType == "praise") {
        this.dataList[index].elementData.isPraise =
          data.type == "add" ? "1" : "0";
      }
    },
    handleDelete(data) {
      let { item, index, detail, type } = data;
      this.deleteItem = item;
      this.deleteType = type;
      let top = detail.y;
      let left = detail.x - 67 - 20;
      this.arrowLeft = left;

      if (top > (this.screenHeight * 2) / 3) {
        this.isModalTop = true;
        top = top - 20;
        top = this.screenHeight - top;
        this.modalStyle = {
          bottom: top + "px",
        };
      } else {
        this.isModalTop = false;
        top = top + 20;
        this.modalStyle = {
          top: top + "px",
        };
      }
      this.showDeleteModal = true;
    },
    // 不感兴趣
    handleDislike() {
      const params = {
        linkType: "",
        moduleId: this.deleteItem.articleId,
        isLink: 1,
        linkUserId: this.personId,
        moduleType: "FORBIT_MODULE_TYPE",
      };
      if (this.deleteType == "article") {
        params.linkType = 3;
        params.moduleId = this.deleteItem.articleId;
      } else if (this.deleteType == "video") {
        params.linkType = 4;
        params.moduleId = this.deleteItem.articleId;
      } else if (this.deleteType == "specialIssue") {
        params.linkType = 6;
        params.moduleId = this.deleteItem.issueId;
      }
      this.handleUpdateLink(params);
    },
    handleShiedldAuthor() {
      this.showDeleteModal = false;
      uni.showModal({
        title: "提示",
        content:
          "确定要屏蔽 " +
          (this.deleteItem.ownName ||
            this.deleteItem.personDetail.personIname) +
          "吗？",
        success: (res) => {
          if (res.confirm) {
            this.shiedldAuthor();
          }
        },
      });
    },
    // 屏蔽作者
    shiedldAuthor() {
      const params = {
        linkType: 1,
        moduleId:
          this.deleteItem.ownId || this.deleteItem.personDetail.personId,
        isLink: 1,
        linkUserId: this.personId,
        moduleType: "FORBIT_MODULE_TYPE",
      };
      this.handleUpdateLink(params);
    },
    handleUpdateLink(params) {
      updateLink(params).then((res) => {
        if (res.code == 200) {
          this.$refs.careerInfo.updateLink(params.linkType, params.moduleId);
          this.showDeleteModal = false;
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: "error",
            duration: 2000,
          });
        }
      });
    },
    getAlertToastProId() {
      getToastProId().then((res) => {
        if (res.data) {
          console.log("---getAlertToastProId-------->", res.data);
          this.alertGoods = res.data;
        }
      });
    },
    // ====BEGIN==== AI面评推广相关 ======
    // ========

  //   showAIAlert() {
  //     let that = this;
  //     // 每次打开小程序只显示1次（改为每天弹一次）
  //     if (!this.showedPromotionAlert) {
  //       this.showedPromotionAlert = true;
  //       var nowTime = new Date();
  //       uni.getStorage({
  //         key: "userDidClickActCollegeAlertTime",
  //         success: function (res) {
  //           var localStorageTime = res.data;
  //           if (
  //             nowTime.getFullYear() != localStorageTime.getFullYear() ||
  //             nowTime.getMonth() != localStorageTime.getMonth() ||
  //             nowTime.getDay() != localStorageTime.getDay()
  //           ) {
  //             //年月日不同
  //             console.log(
  //               "------userDidClickActCollegeAlertTime---success-- > 1天-->",
  //               nowTime,
  //               localStorageTime
  //             );
  //             that.showActPromotion = true;
  //           } else {
  //             console.log(
  //               "------userDidClickActCollegeAlertTime---success-- < 1天-->",
  //               nowTime,
  //               localStorageTime
  //             );
  //             that.showActPromotion = false;
  //           }
  //         },
  //         fail: function () {
  //           console.log(
  //             "------userDidClickActCollegeAlertTime----fail--->",
  //             nowTime
  //           );
  //           that.showActPromotion = true;
  //         },
  //       });
  //     }
  //   },
  //   clickNext() {
  //     wx.reportEvent("home_alert_college_advertise_click", {}); //首页弹窗进入营销页
  //     this.addBuryingPointFn(20089, "", "", "", "");
  //     this.showActPromotion = false;
  //     uni.navigateTo({
  //         url: "/pagesSub/careerGrow/careerSearch/index",
  //     });
  //   },
  //   // // 数据统计
  //   pointCount(step) {
  //     let eventTitle = step == 1 ? "首页按钮点击" : "首页弹窗点击";
  //     const params = {
  //       personId: this.personId,
  //       platform: "1",
  //       optCode: "aiPromotion",
  //       subOptCode: eventTitle,
  //       optIndex: step,
  //       description: "首页AI面评推广",
  //       moduleType: "demonstrate", // 模块类型(zt:职途，zph：招聘会活动-百职万岗，demonstrate：演示-扎堆)
  //     };
  //   },
  //  // 点击推广弹窗
  //  clickAlert() {
  //     this.showActPromotion = false;
  //     var nowTime = new Date(); //点击以后一天弹一次
  //     uni.setStorage({
  //       key: "userDidClickActCollegeAlertTime",
  //       data: nowTime,
  //       success: function () {},
  //     });
  //     this.pointCount(2);
  //     // this.clickNext();
  //     this.addBuryingPointFn(20067, "", "", "", ""); //点击弹窗
  //     if (this.alertGoods.goodsId == '128317245100125') {
  //       wx.reportEvent("banner_alert_699_click", {});//进入699商品页
  //     } else {
  //       wx.reportEvent("banner_alert_8980_click", {});//进入8980商品页
  //     }
  //     // 跳转进商品详情页
  //     uni.navigateToMiniProgram({
  //       appId: "wx614f8a78fff34162",
  //       path:
  //         "/ec_goods/detail?productInstanceId=16868908125&vid=0&id=" +
  //         this.alertGoods.goodsId,
  //       success(res) {},
  //       fail(err) {},
  //     });
  //   },
  //   closeAlert() {
  //     this.showActPromotion = false;
  //     var nowTime = new Date(); //点击以后一天弹一次
  //     uni.setStorage({
  //       key: "userDidClickActCollegeAlertTime",
  //       data: nowTime,
  //       success: function () {},
  //     });
  //     this.pointCount(2);
  //   },

    // ========
    // ===END===== AI面评推广相关 ======
  },
};
</script>

<style lang="scss" scoped>
::v-deep .nav-wrap {
  z-index: 0;
}
::v-deep .u-close--top-right {
  top: 5rpx !important;
  right: 5rpx !important;
}
.career {
  height: 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;

  ::v-deep {
    .nodata {
      padding-top: 200rpx;
    }

    .u-load-more-wrap {
      padding-bottom: 44rpx;
    }
  }

  .tabs-wrap {
    padding-left: 12rpx;
    background-color: #ffffff;
    z-index: 0;
  }

  .tabs {
    width: 475rpx;
  }

  .swiper-box {
    flex-grow: 1;
    height: 1rpx;
    display: flex;
    flex-direction: column;

    .swiper-item {
      height: 100%;
    }
  }
}
</style>
<style lang="scss">
.career-search {
  position: absolute;
  bottom: 36rpx;
  left: 32rpx;
  width: 508rpx;
  padding-left: 32rpx;
  font-size: 28rpx;
  color: #999999;
  background: #fff;
  line-height: 80rpx;
  border-radius: 40rpx;

  .icon-search {
    width: 48rpx;
    height: 48rpx;
    margin-top: -4rpx;
    background-image: url($img-base + "career/search.png");
  }
}

.modal-drawer {
  display: block;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  .modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100000;
    transition: all 0.25s ease-in-out 0s;
    transform: scale(1, 1);
  }

  .modal-drawer-content {
    position: absolute;
    left: 32rpx;
    right: 32rpx;

    .icon-arrow-up,
    .icon-arrow-down {
      position: absolute;
      right: 22rpx;
      width: 135rpx;
      height: 16rpx;
      background-size: 100%;
    }

    .icon-arrow-up {
      top: -16rpx;
      background-image: url($img-base + "career/modal-top-bg.png");
    }

    .icon-arrow-down {
      bottom: -16rpx;
      background-image: url($img-base + "career/modal-bottom-bg.png");
    }
  }

  .delete-box {
    background-color: #fff;
    border-radius: 12rpx;

    .delete-item {
      display: flex;
      align-items: center;
      margin: 0 30rpx;
      padding: 32rpx 0;
      border-bottom: 2rpx solid #f5f5f5;

      &:last-child {
        border: none;
      }

      .item-content {
        &-title {
          margin-bottom: 2rpx;
          font-size: $uni-font-size-lg;
          color: #000000;
        }

        &-lable {
          font-size: $uni-font-size-nor;
          color: #999999;
        }
      }
    }

    .icon {
      margin-right: 28rpx;
      width: 36rpx;
      height: 36rpx;
      background-size: 100% 100%;
    }

    .icon-delete {
      background-image: url($img-base + "career/close.png");
    }

    .icon-shield {
      background-image: url($img-base + "career/shield.png");
    }
  }
}
</style>
